<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>普惠商城-个人中心-订单中心-线上订单-订单结算</title>
	<link rel="stylesheet" href="css/common.css">
	<!-- 个人中心通用样式personal.css -->
	<link rel="stylesheet" href="css/personal.css">
	<link rel="stylesheet" href="css/personal-order-check.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/validform.min.js"></script>
	<style type="text/css">
		.select_2_txt{
			background:#ffffff;
			min-width: 100px;
			max-width:80%;



			height: 38px;border: 1px solid #cccccc;
			line-height:38px;border-radius: 4px;

			margin-bottom: 20px;
			padding:0 20px;
			margin-left:74px;

		}
		.box2_select_2{
			margin-left:14px;
			padding-left: 20px;
			width: 428px; text-align: center;

		}
		.box2{
			height:auto;
		}
	</style>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
		<!-- 导航条左部 -->
		<div class="centerbody">
			<div class="title_left">
				<a href="普惠商城-商城首页.html" class="puhuishopping_common_city" id="puhuishopping_common_city">返回普惠商城首页</a>
				<!-- <div class='citylist' id='citylist'></div> -->
			</div>	
		<!-- 导航条右部 -->
			<div class="title_right">
				您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-商城首页-登录页面.html" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>
				<a href="普惠商城-商城首页-注册页面.html" class="puhuishopping_common_hyzc">会员注册</a>
				<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
				<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
				<div style="clear: both"></div>
			</div>
			<!-- 未登录 -->
			<!-- 	<div class="title_right">
                    您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-个人中心.html" class="puhuishopping_common_login" id="puhuishopping_common_login">普惠会员</a>
                    <a href="#" class="puhuishopping_common_hyzc">[退出]</a>
                    <a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
                    <a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
                    <div style="clear: both"></div>
                </div> -->
		</div>	
	</div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div class="personal_box_tit">
		<div class="centerbody">
			<img src="images/普惠logo最终版白色.png" alt="" class="logo3">
			<a href="普惠商城-个人中心.html" class="personal_box_tit_link">会员首页</a>
			<a href="普惠商城-个人中心-资产中心-我的积分.html" class="personal_box_tit_link">我的积分</a>
			<a href="普惠商城-个人中心-资产中心-我的余额.html" class="personal_box_tit_link">我的余额</a>
			<div class="my_shoplist_box">
				<input type="button" class="my_shoplist" id="my_shoplist" value="我的购物车">
				<img src="images/0.png" alt="" class="num_ico">	
			</div>
			<div class="searchbox">
				<input type="text" class="searchtxt" placeholder="请输入搜索的内容"><input type="button" class="searchbtn" value="搜索">
			</div>
		
			<div style="clear: both"></div>
		</div>
	</div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<!-- <div class="personal_middle_nav">
			<ul>
				<li>账户设置</li>
				<li><a href="普惠商城-个人中心_帐户设置_个人信息.html">个人信息</a></li>
				<li><a href="普惠商城-个人中心-账户设置-收货地址.html">收货地址</a></li>
				<li><a href="普惠商城-个人中心-账户设置-账户安全.html">账户安全</a></li>
				<li><a href="javascript:void(0);">我的银行卡</a></li>
			</ul>
			<ul>
				<li>资产中心</li>
				<li><a href="javascript:void(0);">我的余额</a></li>
				<li><a href="javascript:void(0);">我的积分</a></li>
			</ul>
			<ul>
				<li>订单中心</li>
				<li><a href="普惠商城-个人中心-订单中心-线上订单.html" class="linked">线上订单</a></li>
				<li><a href="普惠商城-个人中心-订单中心-线下订单.html">线下订单</a></li>
			</ul>
			<ul>
				<li>推广中心</li>
				<li><a href="javascript:void(0);">我是推荐人</a></li>
				<li><a href="javascript:void(0);">我是推广师</a></li>
			</ul>
		</div> -->
		<div class="centerbody personal_middle_main check">
			<div class="personal_middle_main_tit">
				<span>填写并核对订单信息</span>
			</div>
			<div class="personal_middle_main_box box1">
				<div class="box_tit">收货人信息
				<input type="button" value="添加联系信息" class="add_info">
				</div>
				<ul>
						<li>
							<div>
								<input type="radio" name="shr_info" class="shr_info selected" checked="checked"><span class="shr_name">白浅</span><span>重庆市江北区江北嘴人民路13号</span><span>13747863950</span>
							</div>
						</li>
						<li>
							<div>
								<input type="radio" name="shr_info" class="shr_info"><span class="shr_name">白浅</span><span title="重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号">重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号</span><span>13747863950</span>
							</div>
						</li>
						<li>
							<div>
								<input type="radio" name="shr_info" class="shr_info"><span class="shr_name">白浅</span><span title="重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号">重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号重庆市江北区江北嘴人民路13号</span><span>13747863950</span>
							</div>
						</li>
					</ul>	
			</div>
			<div class="personal_middle_main_box box2">
				<div class="box_tit">配送方式</div>
				<p><input type="radio" name="trans_status" checked="checked">送货到家<input type="radio" name="trans_status" style="margin-left: 76px;">自提商品</p>
				<p>
					<tr>  
					    <td style="width: 65px;color: #3f3f3f; ">所属区域：</td>  
					    <td>  
					        <select class="box2_select prov">
					            <option value="">省</option>  
					        </select>  
					        <select class="box2_select city">
					            <option value="">市</option>  
					        </select>
					        <select class="box2_select dist">
					            <option value="">区</option>  
					        </select>
							<span class="area_msg" style="color:red;"></span>
					    </td>  
					</tr>  
				</p>
				<p>
					<tr>
					    <td style="width: 65px;color: #3f3f3f; ">提货点：</td>  
					    <td>  
					        <select class="box2_select_2" style="">
					            <option value="">商户名称</option>
								<option value="六点十分建设路口福建省否">六点十分建设路口福建省否</option>
								<option value="发生的范德萨发的否水电费的说法发生的范德萨发的否水电费的说法发生的范德萨发的否水电费的说法">发生的范德萨发的否水电费的说法发生的范德萨发的否水电费的说法发生的范德萨发的否水电费的说法</option>
					        </select>
							<span class="area_msg2" style="color:red;"></span>
					    </td>

					</tr>  
				</p>
				<p><input type="text" disabled="disabled" class="select_2_txt"></input></p>

			</div>
			<div class="personal_middle_main_box box3">
				<div class="box_tit">商品信息</div>
				<form action="">
					<div class="goods_info">
						<p>供应商名称</p>
						<div class="goods_info_box">
							<div class="box_tit">
								<span>商品</span>
								<span>单价</span>
								<span>商品数量</span>
								<span>运费</span>
								<span>总额</span>
							</div>
							<div>
								<div class="box_big">
									<div class="box_big_detail">
										<img src="images/图层-10.png" alt="" class="box_big_detail_img">
										<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
										<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
										<div style="clear: both;"></div>
									</div>
								</div>
									<span class="box_small">¥100.00</span>
									<span class="box_small">10</span>
									<span class="box_small">1000.00</span>
									<span class="box_small">1000</span>
								
								<div class="box_big">
									<div class="box_big_detail">
											<img src="images/图层-10.png" alt="" class="box_big_detail_img">
										<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
										<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">20</span></p>
										<div style="clear: both;"></div>
									</div>
								</div>
									<span class="box_small">¥100.00</span>
									<span class="box_small">10</span>
									<span class="box_small">1000.00</span>
									<span class="box_small">1000</span>
								
							</div>
							
						</div>
						<div class="goods_info_check">
							<ul>
								<li>商品总额：<span>¥100000.00</span></li>
								<li>运费：<span>¥10.00</span></li>
								<li>应付总额：<span>¥100000.00</span></li>
								<li>可获得待用积分：<span>¥100000</span></li>
							</ul>
						</div>
					</div>
					<div class="goods_info">
						<p>供应商名称</p>
						<div class="goods_info_box">
							<div class="box_tit">
							<span>商品</span>
							<span>单价</span>
							<span>商品数量</span>
							<span>运费</span>
							<span>总额</span>
							</div>
							<div>
								<div class="box_big">
									<div class="box_big_detail">
										<img src="images/图层-10.png" alt="" class="box_big_detail_img">
										<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
										<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
										<div style="clear: both;"></div>
									</div>
								</div>
									<span class="box_small">¥100.00</span>
									<span class="box_small">10</span>
									<span class="box_small">1000.00</span>
									<span class="box_small">1000</span>
								
								<div class="box_big">
									<div class="box_big_detail">
											<img src="images/图层-10.png" alt="" class="box_big_detail_img">
										<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
										<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">20</span></p>
										<div style="clear: both;"></div>
									</div>
								</div>
									<span class="box_small">¥100.00</span>
									<span class="box_small">10</span>
									<span class="box_small">1000.00</span>
									<span class="box_small">1000</span>
								
							</div>
						
						</div>
						<div class="goods_info_check">
							<ul>
								<li>商品总额：<span>¥100000.00</span></li>
								<li>运费：<span>¥10.00</span></li>
								<li>应付总额：<span>¥100000.00</span></li>
								<li>可获得待用积分：<span>¥100000</span></li>
							</ul>
						</div>
					</div>
					<div class="goods_info" style="height: auto;padding-bottom: 28px;">
						<p style="border-bottom:1px solid #ccc;padding-bottom: 14px;">结算信息</p>
						<div class="goods_info_check">
							<ul>
								<li>商品总额：<span>¥100000.00</span></li>
								<li>运费：<span>¥10.00</span></li>
								<li>应付总额：<span>¥100000.00</span></li>
								<li>可获得待用积分：<span>¥100000</span></li>
							</ul>
						</div>
						<input type="button" class="form_summit" value="提交订单">
					</div>
				</form>
			</div>
		</div>
		<div style="clear:both;"></div>
	</div>
	<!-- 弹窗部分 -->
		<div class="shadow"></div>
		<div class="login_box_2" style="background: #fff;">
			<form class="siteForm" action="">
				<div class="add_addres">
					<span class="add_tit">添加联系地址</span>
					<img src="images/叉.png" alt="" class="cancel_small">
				</div>
				
				<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>联系人</label><input type="text" class="inputbox user"></p>
				<p><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>手机号</label><input type="text" class="inputbox tel" ></p>
				<div style="position: relative;padding-left: 87px;margin-top: 20px;">
				<tr>  
					    <td style="width: 65px;color: #3f3f3f; padding-right: 40px;font-size: 14px;"><span class="necessarily">*</span>区域</td>  
					    <td style="margin-left: 5px;">
					        <select class="selectBox prov" style="margin-left: 30px;width: 104px;margin-right: 14px;">
					            <option value="" >省</option>
								<option value="重庆">重庆</option>
							</select>
							<select class="selectBox city" style="width: 104px;margin-right: 14px;">
								<option value="" >市</option>
								<option value="重庆">重庆</option>
							</select>
					        <select class="selectBox dist"  style="width: 104px;margin-right: 14px;">
					            <option value="" >区</option>
								<option value="江北">江北</option>
							</select>
					    </td>

					</tr>
				</div>
				<span class="area_msg" style="padding-left:100px;color:red;"></span>
				<p style="margin-top: 20px;"><label for="" style="padding-left: 87px;"><span class="necessarily">*</span>详细地址</label><input type="text" class="inputbox site" style="margin-left: 12px;" ></p>
				<p style="text-align: center;">
					<input type="submit" class="inputbox btn" value="保存" style="font-size: 14px;">
				</p>
		</form>		
				
		</div>
		
	

<!-- 页面底部 -->
	<div class="foot-banner" style="margin-top: 0;">
		<div class="mod_help_list">
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">帮助中心</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">购物中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">配送中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">常见问题</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">售后服务</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货政策</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货流程</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">关于我们</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">公司介绍</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">普惠商城简介</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">联系客服</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">支付方式</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">微信支付</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付宝支付</a></li>

					</ul>
			</div>
		</div>	
		<div class="copyright">
			<p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
			<p>电子商务经营许可证(京)字第03889号</p>
			<p>京公网安备11010502025545号</p>
			<p style="height: 34px;width:350px;margin:17px auto 25px">
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-1.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-2.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink"><img src="images/foot-3.png" alt=""></a>
			</p>
		</div>

	</div>

</body>
<script th:inline="javascript">
$(function(){
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   
	$('.cancel_small').click(function(){
		$('.shadow').css('display','none');
		$('.login_box_2').css('display','none');
	})

	$('.add_info').click(function(){
		$('.shadow').css('display','block');
		$('.login_box_2').css('display','block');
	})
	$('.shadow').css('height',$(window).height());
		$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
		$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
	$(window).resize(function(){
		$('.shadow').css('height',$(window).height());
		$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
		$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
	});
	/*验证*/
    var demo = $(".siteForm").Validform({
        tiptype:3,
        showAllError:true,
        datatype:{
            "n11":/^\d{11}$/,
            "zh_sit":/^([^\x00-\xff]|[A-Za-z0-9_])+$/,
			"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/
        },
        ajaxPost:true
    });
    demo.addRule([{
        ele:".user",
        datatype:"zh2-4"
    },
	{
		ele:".tel",
		datatype:"n11"
	},
	{
		ele:".site",
        datatype:"zh_sit"
	}
	]);
	$('.selectBox').blur(function(){
	    if($('.prov').val()==''||$('.city').val()==''||$('.dist').val()==''){
            $('.area_msg').text('请选择县市区内容！');
		}else{
            $('.area_msg').text('');
		}
	})
    $('.box2_select').blur(function(){
        if($('.prov').val()==''||$('.city').val()==''||$('.dist').val()==''){
            $('.area_msg').text('请选择县市区内容！');
        }else{
            $('.area_msg').text('');
        }
    })
	$('.box2_select_2').blur(function(){
            if($('.box2_select_2').val()==''){
                $('.area_msg2').text('请选择提货点！');
                $('.select_2_txt').css('display','none');
            }else{
                $('.area_msg2').text('');
            }
    })
    $('.box2_select_2').change(function(){
        if($('.box2_select_2').val()==''){
            $('.area_msg2').text('请选择提货点！');
            $('.select_2_txt').css('display','none');
        }else{
            $('.area_msg2').text('');
            $('.select_2_txt').css('display','block');
            var str=$(this).val();
            var testLength = str.length;
            $('.select_2_txt').val(str);
            $('.select_2_txt').css('width', testLength*15	 + 'px')
        }
    })


})
	</script>
}

</html>